<script>
import { ElMessage } from 'element-plus';
import Tools from '@/utils/tools';
// import BiPengModel from '@/utils/bipengModel.js'
// import HBCrashModel from '@/utils/HBCrashModel.js'
// import ShipTrigger from '@/utils/shipTrigger.js'
import Api from "@/api";
import Store from '@/store'
let dataSourcesCollections = null;
export default {
  name: "ship-warning-combine",
  components: {
  },
  data() {
    return {
      switchValue: false,
      shipSphereMask: null,
      originIndex: 0,
      activeId: null,
      qiaoQuPolygon: null,
      qiaoQuPolygonLabel: null
    };
  },
  watch: {

  },
  computed: {
    LayerTreePanelOpened() {

      return true;
    },
    combineTabsStyle() {

      let delta = 33;
      if (this.$refs.menu_bar) {
        let width = this.$refs.menu_bar.scrollWidth;

        if (width - 350 > 0) {

          delta = (width - 350) / 3.16;
        }
      }


      const n = this.originIndex * delta;
      return {
        transform: `translateX(${n}%)`
      }
    },
    // active 标签
    activeTag() {
      // 允许的值为
      // crash 碰撞
      // speed 速度
      // buoy  航标
      return this.$store.state.shipSpeedWarningActiveTag
    },
    // 速度告警
    shipSpeedWarningList() {
      // return this.$store.state.shipSpeedWarningList
      // window.shipSpeedWarningMap = this.$store.state.shipSpeedWarningMap;
      return this.$store.state.shipSpeedWarningMap
    },
    //净空高
    jingkonggaoList() {

      let filtedJingKongGaoObj = {}

      Object.keys(this.$store.state.shipJingKongGaoList).forEach(key => {
        let v = this.$store.state.shipJingKongGaoList[key];
        if (v.qiaoQu) {
          filtedJingKongGaoObj[key] = v;
        }
      })
      return filtedJingKongGaoObj;
    },
    //船舶丢失信号
    diushiXinHaoList() {

      let filtedShiXin = []

      Object.keys(this.$store.state.shipShiXinList).forEach(key => {
        let v = this.$store.state.shipShiXinList[key];

        if (v.shixin == 1) {
          let utcDate = new Date(v.utc * 1000);
          let year = utcDate.getFullYear();
          let month = String(utcDate.getMonth() + 1).padStart(2, '0')
          let day = String(utcDate.getDate()).padStart(2, '0')
          let hours = String(utcDate.getHours()).padStart(2, '0')
          let minutes = String(utcDate.getMinutes()).padStart(2, '0')
          let seconds = String(utcDate.getSeconds()).padStart(2, '0')

          v.utcFormat = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          filtedShiXin.push(v);
        }
      })
      filtedShiXin = filtedShiXin.sort((a, b) => {

        return a.utc - b.utc;
      })
      return filtedShiXin;
    },
    // 碰撞告警
    shipCrashWarningList() {
      // window.shipCrashWarningMap = this.$store.state.shipCrashWarningMap;
      return this.$store.state.shipCrashWarningMap
    },
    // 航标船的告警数据
    hbCrashWarningList() {
      return this.$store.state.hbCrashData
    },
    cesiumSceneIsCreated() {
      return this.$store.state.cesiumSceneIsCreated
    }
  },
  mounted() {
    return
    dataSourcesCollections = new Cesium.CustomDataSource(
      "shipSpeedCrash"
    )
    viewer.dataSources.add(dataSourcesCollections);
    // 告警列表删选清除
    this.addWarningInterval()
    this.setShipSphereVisible();
  },
  unmounted() {
    return
    // 消除声明的空间
    dataSourcesCollections.entities.removeAll();
    viewer.dataSources.remove(dataSourcesCollections);
    dataSourcesCollections = null;
    this.clearWarningInterval();
    if (window.shipSphereSource && window.shipSphereSource.entities) {
      window.shipSphereSource.entities.show = this.shipSphereMask;
    }
    this.clearQiaoQuEntities()
    this.$store.commit('CLEAR_REALTIME_LIST')
  },
  methods: {
    // 清理掉船舶的上层遮罩
    setShipSphereVisible() {
      if (window.shipSphereSource && window.shipSphereSource.entities) {
        this.shipSphereMask = window.shipSphereSource.entities.show;
      } else {
        this.shipSphereMask = false;
      }
      this.switchValue = this.shipSphereMask
    },
    // 60s 轮训一次
    addWarningInterval() {
      this.timer = setInterval(() => {
        const timeNow = new Date().getTime();
        for (let key in this.shipCrashWarningList) {
          const item = this.shipCrashWarningList[key];
          const itemUTCNow = new Date(item.utc * 1000).getTime();
          // 两次时间差超过 60s 就删除该条记录
          if (timeNow - itemUTCNow > 1000 * 30) {
            this.$store.commit('DELETE_SHIP_CRASH_WARNING_LIST', {
              data: {
                mmsi: item.mmsi
              }
            })


            //移除避碰模型
            if (dataSourcesCollections) {

              dataSourcesCollections.entities.removeById(item.mmsi);
              dataSourcesCollections.entities.removeById(item.mmsi + "_fun_head");
              dataSourcesCollections.entities.removeById(item.mmsi + "_fun_bottom");
              dataSourcesCollections.entities.removeById(item.mmsi + "_fun_right");
              dataSourcesCollections.entities.removeById(item.mmsi + "_fun_left");

              for (let j = 0; j < item.pengzhuangShips.length; ++j) {
                let pengzhuangShip = item.pengzhuangShips[j]
                dataSourcesCollections.entities.removeById(pengzhuangShip.mmsi);
                dataSourcesCollections.entities.removeById(pengzhuangShip.mmsi + "_fun_head");
                dataSourcesCollections.entities.removeById(pengzhuangShip.mmsi + "_fun_bottom");
                dataSourcesCollections.entities.removeById(pengzhuangShip.mmsi + "_fun_right");
                dataSourcesCollections.entities.removeById(pengzhuangShip.mmsi + "_fun_left");
              }

            }
          }
        }
        for (let key in this.shipSpeedWarningList) {
          const item = this.shipSpeedWarningList[key];
          const itemUTCNow = new Date(item.utc * 1000).getTime();
          // 两次时间差超过 60s 就删除该条记录
          if (timeNow - itemUTCNow > 1000 * 30) {
            this.$store.commit('DELETE_SHIP_SPEED_WARNING_LIST', {
              data: {
                mmsi: item.mmsi
              }
            })
          }
        }
        for (let key in this.jingkonggaoList) {
          const item = this.jingkonggaoList[key];
          const itemUTCNow = new Date(item.utc * 1000).getTime();
          // 两次时间差超过 60s 就删除该条记录
          if (timeNow - itemUTCNow > 1000 * 30) {
            this.$store.commit('DELETE_SHIP_JINGKONGGAO_LIST', {
              data: {
                mmsi: item.mmsi
              }
            })
          }
        }
        for (let item of this.diushiXinHaoList) {

          const itemUTCNow = new Date(item.utc * 1000).getTime();
          // 两次时间差超过 60s 就删除该条记录
          if (timeNow - itemUTCNow > 1000 * 30) {

            this.$store.commit('DELETE_SHIP_SHIXIN_LIST', {
              data: {
                mmsi: item.mmsi
              }
            })
          }
        }


      }, 60 * 1000)
    },
    clearWarningInterval() {
      clearInterval(this.timer);
    },
    clearQiaoQuEntities() {
      if (this.qiaoQuPolygon) {
        viewer.entities.remove(this.qiaoQuPolygon)
        this.qiaoQuPolygon = null;
      }
      if (this.qiaoQuPolygonLabel) {
        viewer.entities.remove(this.qiaoQuPolygonLabel)
        this.qiaoQuPolygonLabel = null;
      }
    },
    selectTab(v) {
      // this.activeTag = v;
      this.clearQiaoQuEntities()
      this.$store.commit('SET_SPEED_WARNING_ACTIVE_TAG', {
        data: v
      })
    },
    // 点击碰撞告警的船只
    clickCrashShip(data) {
      return
      dataSourcesCollections.entities.removeAll();
      new BiPengModel().buildBiPengModel(this, data, true, true, "#0000ff", dataSourcesCollections);
      data.timeStamp = new Date().getTime();
      this.activeId = data.timeStamp;
    },
    clickDiuShiXinHao(data) {
      return

      if (data.shixin == 1) {
        let shipName = "";
        if (data.mmsi) {
          if (window.MMSI_STATE && window.MMSI_STATE[data.mmsi]) {
            shipName = window.MMSI_STATE[data.mmsi].shipName;
          }
        }
        if (!shipName) {
          this.$store.commit('DELETE_SHIP_SHIXIN_LIST', {
            data: {
              mmsi: data.mmsi
            }
          })

          return;

        }
        if (shipName) {
          let dataInner = window.MMSI_STATE[data.mmsi];
          if (dataInner && dataInner.destinationData && dataInner.destinationData.destinationCoordinates) {
            let longitude = dataInner.destinationData.destinationCoordinates[0];
            let latitude = dataInner.destinationData.destinationCoordinates[1];
            Tools.FlyToPoint(Cesium.Cartesian3.fromDegrees(longitude, latitude, 30), 0, -15, 100, 3, () => { });
            console.log(dataInner, 'dataInner')
            const ShipTriggerInstance = ShipTrigger.instance;
            if (!ShipTriggerInstance) { return }
            setTimeout(() => {
              ShipTriggerInstance.reTrigger({
                mmsi: dataInner.originData.mmsi,
                url: dataInner.url
              })
            }, 1000)
          }
        }
      }
      data.timeStamp = new Date().getTime();
      this.activeId = data.timeStamp;
    },
    async clickJingKongItem(data) {
      return
      if (data.bridge_jingkong) {
        let shipName = "";
        if (data.mmsi) {
          if (window.MMSI_STATE && window.MMSI_STATE[data.mmsi]) {
            shipName = window.MMSI_STATE[data.mmsi].shipName;
          }
        }
        if (shipName) {
          let dataInner = window.MMSI_STATE[data.mmsi];
          if (dataInner && dataInner.destinationData && dataInner.destinationData.destinationCoordinates) {
            let longitude = dataInner.destinationData.destinationCoordinates[0];
            let latitude = dataInner.destinationData.destinationCoordinates[1];
            Tools.FlyToPoint(Cesium.Cartesian3.fromDegrees(longitude, latitude, 30), 0, -15, 100, 3, () => { });
            console.log(dataInner, 'dataInner')
            const ShipTriggerInstance = ShipTrigger.instance;
            if (!ShipTriggerInstance) { return }
            setTimeout(() => {
              ShipTriggerInstance.reTrigger({
                mmsi: dataInner.originData.mmsi,
                url: dataInner.url
              })
            }, 1000)

            let qiaoquResult = data.qiaoQu;
            if (qiaoquResult.featureCount > 0) {
              let feature = qiaoquResult.features[0]
              let qiaoQuGeometry = feature.geometry;
              let points = qiaoQuGeometry.points;

              this.createPolygonFromPointsWithLabel(points, false, feature.fieldValues[feature.fieldValues.length - 1] + "@" + "净空高:" + data.bridge_jingkong + "米", qiaoQuGeometry.center)
            }
            else {

              this.$store.commit('DELETE_SHIP_JINGKONGGAO_LIST', {
                data: {
                  mmsi: data.mmsi
                }
              })

            }
          }
        } else {
          ElMessage('未查询到船只位置')
        }
      }
    },
    createPolygonFromPointsWithLabel(points, fly, labelName, labelPos) {
      return

      let waterZ = Store.getters.waterLayerRealHeight + 1;
      if (labelPos) {
        labelPos.z = waterZ
      }

      points = points.map((item) => {
        item.z = waterZ
        return item
      })

      points = points.reduce((acc, curr) => {

        return acc.concat(Object.values(curr))
      }, [])

      if (this.qiaoQuPolygon) {
        viewer.entities.remove(this.qiaoQuPolygon)
      }
      if (this.qiaoQuPolygonLabel) {
        viewer.entities.remove(this.qiaoQuPolygonLabel)
      }

      this.qiaoQuPolygon = window.viewer.entities.add({
        id: "qiaoqu_d",
        name: "qiaoqu_d",
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([].concat(...points)),
          material: Cesium.Color.CYAN.withAlpha(0.5),
          outline: false,
          height: waterZ
        }
      });

      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d')
      let font = "bold 40px '微软雅黑'";
      const labels = labelName.split("@");
      canvas.width = 600;
      canvas.height = 300;
      let rotation = -60;
      let translateX = 300;
      let translateY = 100;
      if (labelName.indexOf("天兴") >= 0) {
        rotation = -20;
        translateY = 160;
        font = "bold 40px '微软雅黑'";
      }
      else if (labelName.indexOf("白沙") >= 0) {
        rotation = -54;
        translateY = 80;
      }
      else if (labelName.indexOf("二七") >= 0) {
        rotation = -54;
      }
      context.font = font;
      context.textAlign = "center";
      context.fillStyle = "#ffffff";
      context.textBaseline = "middle";
      context.translate(translateX, translateY)
      context.fillText(labels[0], 0, 0);
      context.fillText(labels[1], 0, 80);
      context.fill();
      const imageEnt = new Image();
      const imageDataURL = canvas.toDataURL('image/png', 1)
      imageEnt.src = imageDataURL;
      // 添加面
      // 添加文本
      this.qiaoQuPolygonLabel = window.viewer.entities.add({
        id: "qiaoqu_label",
        name: "qiaoqu_label",
        polygon: {
          height: waterZ,
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([].concat(...points)),
          outline: false,
          material: new Cesium.ImageMaterialProperty({
            image: imageEnt,
            // 必须设置透明度
            transparent: true
          }),
          stRotation: SuperMap3D.Math.toRadians(rotation)
        }
      });

      if (fly) {
        window.viewer.flyTo(this.qiaoQuPolygon)
      }


    },
    // 点击速度告警的船只
    clickSpeedShip(data) {
      return
      if (data.speedError) {
        let shipName = "";
        if (data.mmsi) {
          if (window.MMSI_STATE && window.MMSI_STATE[data.mmsi]) {
            shipName = window.MMSI_STATE[data.mmsi].shipName;
          }
        }
        if (shipName) {
          let dataInner = window.MMSI_STATE[data.mmsi];
          if (dataInner && dataInner.destinationData && dataInner.destinationData.destinationCoordinates) {
            let longitude = dataInner.destinationData.destinationCoordinates[0];
            let latitude = dataInner.destinationData.destinationCoordinates[1];
            Tools.FlyToPoint(Cesium.Cartesian3.fromDegrees(longitude, latitude, 30), 0, -15, 100, 3, () => { });
            console.log(dataInner, 'dataInner')
            const ShipTriggerInstance = ShipTrigger.instance;
            if (!ShipTriggerInstance) { return }
            setTimeout(() => {
              ShipTriggerInstance.reTrigger({
                mmsi: dataInner.originData.mmsi,
                url: dataInner.url
              })
            }, 1000)
          }
        } else {
          ElMessage('未查询到船只位置')
        }
      }
      data.timeStamp = new Date().getTime();
      this.activeId = data.timeStamp;
    },
    // 点击告警的航标船 
    clickHBShip(data) {
      return
      const that = this;
      dataSourcesCollections.entities.removeAll();
      const model = new HBCrashModel()
      model.init({
        context: that,
        dataSources: dataSourcesCollections,
        longitude: Number(data.lon),
        latitude: Number(data.lat),
        name: data.hbmc,
        type: data.type,
        pengzhuangShips: data.pengzhuangShips || []
      });
      data.pengzhuang = true;
      Tools.FlyToPoint(Cesium.Cartesian3.fromDegrees(Number(data.lon), Number(data.lat), 30), 0, -15, 100, 3, () => { });
      data.timeStamp = new Date().getTime();
      this.activeId = data.timeStamp;
    },
    // 获取序号
    getIndex(index, length) {
      let times = String(length).length - String(index).length;
      return '0'.repeat(times) + index
    },
    switchValueChange(v) {
      if (!window.shipSphereSource.entities) { return }
      if (v) {
        window.shipSphereSource.entities.show = true;
      } else {
        window.shipSphereSource.entities.show = false;
      }
    },
    doClosePanel() {
      this.$store.commit("SET_SHIP_SPEED_WARNING", {
        data: false
      })
      this.$store.commit("SET_SHIP_CRASH_WARNING", {
        data: false
      })
    },
    goToSingleItem(v) {
      this.originIndex = this.originIndex + v;
    }
  },
};
</script>
<template>
  <!-- :style="{right:(LayerTreePanelOpened)?'430px':'60px'}" -->
  <div id="ship-warning-combine" class="ship-warning-combine">
    <div class="crash-combine combine-com">
      <div class="combine-header">
        <span class="font-alimamashuheiti">
          阈值告警
        </span>
        <!-- <span>
          <el-tooltip content="开启或关闭船舶遮罩" placement="bottom" effect="dark">
            <el-switch v-if="$route.name === 'early-warning'" v-model="switchValue" inline-prompt style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #9e9e9e;
                " active-text="开" inactive-text="关" @change="switchValueChange" />
          </el-tooltip>
          <el-icon color="#fff" :size="25" style="cursor: pointer;position: relative; top: 7px;" @click="doClosePanel">
            <CloseBold />
          </el-icon>
        </span> -->
      </div>
      <div class="combine-tabs-scroll">
        <div ref="menu_bar" class="combine-tabs" :style="combineTabsStyle">
          <span class="normal font-alimamashuheiti" @click="selectTab('crash')" :class="[
            activeTag === 'crash' ? 'active' : ''
          ]">设备监测(1)
          </span>
          <span class="normal font-alimamashuheiti" @click="selectTab('speed')" :class="[
            activeTag === 'speed' ? 'active' : ''
          ]">温度(1)
          </span>
          <span class="normal font-alimamashuheiti" @click="selectTab('buoy')" :class="[
            activeTag === 'buoy' ? 'active' : ''
          ]">压力(2)
          </span>
        </div>
        <div class="direction direction-left" v-if="originIndex < 0" @click="goToSingleItem(1)">
          <el-icon color="#FFFFFF" :size="20">
            <ArrowLeftBold />
          </el-icon>
        </div>
        <div class="direction direction-right" v-if="originIndex > -1" @click="goToSingleItem(-1)">
          <el-icon color="#FFFFFF" :size="20">
            <ArrowRightBold />
          </el-icon>
        </div>
      </div>

      <!-- <div class="combine-content" v-if="activeTag === 'crash'">
        <div class="blank-data" v-if="!Object.keys(shipCrashWarningList).length">
          暂无碰撞告警数据
        </div>
        <div class="singe-area" @click="clickCrashShip(item)" v-for="(item, key, index) in shipCrashWarningList"
          :key="index">
          <div class="icon-area" :class="[item.timeStamp === activeId? 'active': '']">
            <span>{{ getIndex(index + 1, Object.keys(shipCrashWarningList).length) }}</span>
          </div>
          <div class="main-content">
            <span>
              <span class="mmsi">{{ item.mmsi }}</span>
              <span class="ship-name">-{{ item.shipName }}</span>
              <span class="xiaolei">{{ item.xiaolei }}</span>
            </span>
            <br />
            <span>
              <span class="attr-key" v-if="item.pengzhuangShips.length">碰撞船只: </span>
              <span class="pz-ship" v-for="(inner) in item.pengzhuangShips">
                <span class="mmsi">{{ inner.mmsi }}</span>
              </span>
            </span>
            <br />
            <span>
              <span class="attr-key">告警时间: </span>
              <span>{{ item.timeNow }}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="combine-content" v-if="activeTag === 'speed'">
        <div class="blank-data" v-if="!Object.keys(shipSpeedWarningList).length">
          暂无速度告警数据
        </div>
        <div class="singe-area" @click="clickSpeedShip(item)" v-for="(item, key, index) in shipSpeedWarningList"
          :key="index">
          <div class="icon-area" :class="[item.timeStamp === activeId? 'active': '']">
            <span>{{ getIndex(index + 1, Object.keys(shipSpeedWarningList).length) }}</span>
          </div>
          <div class="main-content">
            <span>
              <span class="mmsi">{{ item.mmsi }}</span>
              <span class="ship-name">-{{ item.shipName }}</span>
              <span class="xiaolei">{{ item.xiaolei }}</span>
            </span>
            <br />
            <span>
              <span class="attr-key">告警时间: </span>
              <span>{{ item.timeNow }}</span>
            </span>
          </div>
        </div>
      </div>
      <div class="combine-content" v-if="activeTag === 'buoy'">
        <div class="blank-data" v-if="!hbCrashWarningList.length">
          暂无航标告警数据
        </div>
        <div class="singe-area" @click="clickHBShip(item)" v-for="(item, index) in hbCrashWarningList" :key="index">
          <div class="icon-area" :class="[item.timeStamp === activeId? 'active': '']">
            <span>{{ getIndex(index + 1, hbCrashWarningList.length) }}</span>
          </div>
          <div class="main-content">
            <span>
              <span class="mmsi">{{ item.hbmc }}</span>
              <span class="xiaolei">{{ item.type }}</span>
            </span>
            <br />
            <span>
              <span class="attr-key" v-if="item.pengzhuangShips.length">碰撞船只: </span>
              <span class="pz-ship" v-for="(inner) in item.pengzhuangShips">
                <span class="mmsi">{{ inner.mmsi }}-</span>
                <span class="mmsi">{{ inner.name }}</span>
              </span>
            </span>
          </div>
        </div>
      </div>
      <div class="combine-content" v-if="activeTag === 'jkg'">
        <div class="blank-data" v-if="!Object.keys(jingkonggaoList).length">
          暂无净空高数据
        </div>
        <div class="singe-area" @click="clickJingKongItem(item)" v-for="(item, key, index) in jingkonggaoList"
          :key="index">
          <div class="icon-area" :class="[item.timeStamp === activeId? 'active': '']">
            <span>{{ getIndex(index + 1, Object.keys(jingkonggaoList).length) }}</span>
          </div>
          <div class="main-content">
            <span class="mmsi">{{ item.mmsi }}</span>
              <span class="ship-name">-{{ item.shipName }}</span>
              <span class="jingkonggao">{{ item.name }}</span>
              <br/>
              <span >净空高: {{ item.bridge_jingkong }}m</span>
            <br />
            <span class="attr-key">定位时间: </span>
            <span>{{ item.timeNow }}</span>
          </div>
        </div>
      </div>
      <div class="combine-content" v-if="activeTag === 'shixin'">
        <div class="blank-data" v-if="!diushiXinHaoList.length">
          暂无船舶丢失信号数据
        </div>
        <div class="singe-area" @click="clickDiuShiXinHao(item)" v-for="(item, index) in diushiXinHaoList"
          :key="index">
          <div class="icon-area" :class="[item.timeStamp === activeId? 'active': '']">
            <span>{{ getIndex(index + 1, diushiXinHaoList.length) }}</span>
          </div>
          <div class="main-content">
            <span>
              <span class="mmsi">{{ item.mmsi }}</span>
              <span class="ship-name">-{{ item.shipName }}</span>
              <span class="xiaolei">{{ item.xiaolei }}</span>
              <br/>
              <span >规则: {{ item.shixinTime }}分钟</span>
            </span>
            <br />
            <span>
              <span class="attr-key">时间: </span>
              <span>{{ item.utcFormat }}</span>
            </span>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>
<style lang="less">
.ship-warning-combine {
  z-index: 10;
  position: fixed;
  pointer-events: all;
  left: 500px;
  top: 11rem;
  width: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: rgba(0, 0, 0, 0.5);

  & p {
    color: #fff;
    font-style: italic;
    line-height: 4rem;
    height: 4rem;
  }

  &>.combine-com {
    &>.combine-header {
      position: relative;
      font-size: 1.4rem;
      height: 3.5rem;
      line-height: 3.5rem;
      color: #ffffff;
      background-repeat: no-repeat;
      background-image: url(@/components/GlobalCard/images/main-header.svg);
      background-size: cover;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      padding-right: 1rem;

      &>span {
        margin-left: 30px;
        font-style: italic;
      }

      &:before {
        content: "";
        display: inline-block;
        position: absolute;
        left: 10px;
        top: 14px;
        width: 5px;
        height: 5px;
        background-color: rgb(0, 255, 225);
        background-size: 100%;
      }

      &:after {
        content: "";
        display: inline-block;
        position: absolute;
      }
    }

    &>.combine-tabs-scroll {
      position: relative;
      width: 100%;
      background-image: linear-gradient(to right, rgba(4, 30, 60, 0.9), rgba(4, 30, 60, 0.8));

      &>.combine-tabs {
        padding-left: 18px;
        padding-right: 18px;
        display: flex;
        justify-content: flex-center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        height: 40px;
        line-height: 40px;

        text-overflow: ellipsis;
        white-space: nowrap;
        transition: transform .3s;

        &>span {
          color: #fff;
          font-size: 1.4rem;
          padding: 0 18px;
          padding-left: 0px;

          &.blank {
            flex: 1;
            height: 40px;
            border-top: 1px solid transparent;
          }

          &.normal {
            height: 40px;
            cursor: pointer;
            position: relative;
            text-align: center;

            &.active {
              color: #00DFFA;

              &:before {
                content: "";
                position: absolute;
                left: calc(50% - 10px);
                bottom: 0;
                display: inline-block;
                width: 20px;
                height: 4px;
                background-color: #00DFFA;
              }
            }

          }
        }

        &>span:nth-child(even) {
          padding-right: 18px;
        }

        &>span:last-child {
          padding-right: 0px;
        }
      }

      &>.direction {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 1);
        position: absolute;
        display: flex;
        align-items: center;
        top: 0;
        height: 100%;

        &.direction-left {
          left: 0;
        }

        &.direction-right {
          right: 0;
        }
      }
    }

    &>.combine-content {
      max-height: 300px;
      overflow-y: auto;
      overflow-x: hidden;

      &>.blank-data {
        color: #c6c6c6;
        text-align: center;
      }

      &>.singe-area {
        color: #fff;
        margin-bottom: 10px;
        padding: 10px 17px;
        padding-right: 10px;
        cursor: pointer;
        transition: all .3s;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:nth-child(even) {
          background-color: rgba(255, 255, 255, 0.13);
        }

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }

        &>.icon-area {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.13);
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bold;

          &.active {
            color: #ff5722;
          }
        }

        &>.main-content {
          font-size: 12px;
          flex: 1;
          padding-left: 10px;
          flex-wrap: nowrap;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: clip;

          &>span {
            font-weight: bolder;
            font-size: 14px;
            line-height: 1.8;

          }

          & span.attr-key {
            color: #fefefe;
          }

          & span.mmsi,
          & span.ship-name {
            color: #ff5722;
          }
        }
      }
    }
  }

}
</style>
